<script setup lang="ts">
import { computed, ref, watch, reactive } from 'vue';
const locale = reactive({
  el: {
    pagination: {
      currentPage: '第 {pager} 页',
      deprecationWarning:
        '你使用了一些已被废弃的用法，请参考 el-pagination 的官方文档',
      goto: '前往',
      next: '下一页',
      nextPages: '向后 {pager} 页',
      page: '页',
      pageClassifier: '页',
      pagesize: '条/页',
      prev: '上一页',
      prevPages: '向前 {pager} 页',
      total: '共 {total} 条',
    },
  },
});

export interface PaginationProps {
  /** 是否禁用 */
  disabled?: boolean;
  /** 是否隐藏当只有一页时 */
  hideOnSinglePage?: boolean;
  /** 总条目数 */
  total: number;
  /** 每页显示个数选择器的选项设置 */
  pageSizes?: number[];
  /** 默认每页大小（从 pageSizes 中取第一个） */
  defaultPageSize?: number;
  /** 默认当前页码 */
  defaultPage?: number;
  /** 页码按钮的数量，当总页数超过该值时会折叠 */
  pagerCount?: number;
  /** 组件布局，子组件名用逗号分隔 */
  layout?: string[];
  /** 是否使用小型分页样式 */
  small?: boolean;
  /** 是否为分页按钮添加背景色 */
  background?: boolean;
}

const props = withDefaults(defineProps<PaginationProps>(), {
  total: 0,
  pageSizes: () => [10, 20, 30, 50, 100],
  defaultPageSize: undefined,
  defaultPage: 1,
  pagerCount: 7,
  layout: () => ['sizes', 'prev', 'pager', 'next', 'jumper', 'total'],
  small: false,
  background: false,
  disabled: false,
  hideOnSinglePage: false,
});

const emit = defineEmits<{
  (e: 'change', { page, pageSize }: { page: number; pageSize: number }): void;
}>();

// 内部状态
const currentPage = ref(props.defaultPage);
const pageSize = ref(props.defaultPageSize || props.pageSizes[0]);

// 计算总页数
const totalPages = computed(() => {
  return Math.max(1, Math.ceil(props.total / pageSize.value));
});

// 自动修正当前页码（当页大小或总条数变化时）
watch(
  [() => props.total, pageSize],
  () => {
    if (currentPage.value > totalPages.value) {
      currentPage.value = totalPages.value;
    }
  },
  { immediate: true }
);

// 统一触发 change 事件
const emitChange = () => {
  emit('change', {
    page: currentPage.value,
    pageSize: pageSize.value,
  });
};

// 页码变化处理
const handlePageChange = (page: number) => {
  currentPage.value = Math.max(1, Math.min(page, totalPages.value));
  emitChange();
};

// 页大小变化处理
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  // 保持当前页在有效范围内
  currentPage.value = Math.min(currentPage.value, totalPages.value);
  emitChange();
};

// 上一页
const goPrev = () => {
  if (props.disabled) return;
  handlePageChange(currentPage.value - 1);
};

// 下一页
const goNext = () => {
  if (props.disabled) return;
  handlePageChange(currentPage.value + 1);
};

// 跳转到指定页
const goToPage = (page: number) => {
  if (props.disabled) return;
  handlePageChange(page);
};

// 暴露方法供父组件调用
defineExpose({
  goPrev,
  goNext,
  goToPage,
  getCurrentPage: () => currentPage.value,
  getPageSize: () => pageSize.value,
});
</script>

<template>
  <el-config-provider :locale="locale">
    <el-pagination
      class="xt-pagination"
      v-bind="$attrs"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="props.total"
      :page-sizes="props.pageSizes"
      :pager-count="props.pagerCount"
      :layout="props.layout.join(',')"
      :small="props.small"
      :background="props.background"
      :disabled="props.disabled"
      :hide-on-single-page="props.hideOnSinglePage"
      @update:current-page="handlePageChange"
      @update:page-size="handleSizeChange"
  /></el-config-provider>
</template>

<style lang="scss" scoped></style>
